<template>
  <el-dialog title="" :visible="value" width="60%" append-to-body @close="$emit('input', false)">
    <div id="clickview" style="height: 500px">
      <!-- <fullscreen style="height: 100%; background: #f7f8fa; overflow: auto">

      </fullscreen> -->
      <ClickPreview
        ref="paneViewPreviewRef"
        :component-data="componentData"
        :canvas-style-data="styleData"
        :show-type="'width'"
        :panel-info="panelInfo"
        canvas-id="clickview"
      ></ClickPreview>
    </div>
  </el-dialog>
</template>

<script>
import ClickPreview from './ClickPreview.vue'
import { findOne } from '@/api/panel/panel'
export default {
  name: 'ClickView',
  components: {
    ClickPreview,
  },
  props: {
    value: {
      type: Boolean,
      default: false,
    },
    clickId: {
      type: String,
      default: '',
    },
  },
  data() {
    return {
      canvasId: 'canvas-main',
      componentData: [],
      styleData: {},
      panelInfo: {},
      showPreview: false,
    }
  },
  computed: {
    // ...mapState(['componentData', 'canvasStyleData', 'panelViewDetailsInfo']),
    // panelInfo() {
    //   return this.$store.state.panel.panelInfo
    // },
  },
  watch: {
    value(newval) {
      if (newval) {
        this.getData()
      } else {
        this.styleData = {}
        this.panelInfo = {}
        this.componentData = []
      }
    },
  },
  methods: {
    closed() {
      this.showPreview = false
    },
    onOpen() {
      setTimeout(() => {
        this.showPreview = true
      }, 2000)
    },
    async getData() {
      findOne(this.clickId).then((res) => {
        if (!res.data) return
        const watermarkInfo = {
          ...(res?.data?.watermarkInfo || {}),
          settingContent: JSON.parse(res.data?.watermarkInfo?.settingContent || '{}'),
        }
        this.panelInfo = {
          id: res.data.id,
          name: res.data.name,
          privileges: res.data.privileges,
          sourcePanelName: res.data.sourcePanelName,
          status: res.data.status,
          createBy: res.data.createBy,
          createTime: res.data.createTime,
          updateBy: res.data.updateBy,
          updateTime: res.data.updateTime,
          watermarkOpen: res.data.watermarkOpen,
          watermarkInfo: watermarkInfo,
        }
        this.componentData = JSON.parse(res.data.panelData)
        this.styleData = JSON.parse(res.data.panelStyle)
      })
    },
  },
}
</script>

<style lang="scss" scoped>
.dashboard {
  height: 100%;
}

::v-deep .component-outer:hover {
  box-shadow: none;
}

::v-deep .el-dialog__header {
  border-bottom: 0 !important;
}
</style>
